<template>
  <el-drawer :visible.sync="drawer_">
    <div slot="title">
      <span class="el-icon-notebook-1" style=" color:black"> 流程审批记录</span>
    </div>
    <el-card class="box-card" v-if="flowRecordList">
      <el-timeline>
        <el-timeline-item
          v-for="(item,index) in flowRecordList"
          :key="index"
          :icon="setIcon(item.finishTime)"
          :color="setColor(item.finishTime)"
        >
          <p style="font-weight: 700">{{item.taskName}}</p>
          <el-card :body-style="{ padding: '10px' }">
            <el-descriptions class="margin-top" :column="1" size="small" border>
              <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
                <template slot="label"><i class="el-icon-user"></i>实际办理</template>
                {{item.assigneeName}}
                <el-tag type="info" size="mini">{{item.deptName}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
                <template slot="label"><i class="el-icon-user"></i>候选办理</template>
                {{item.candidate}}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-label">
                <template slot="label"><i class="el-icon-date"></i>接收时间</template>
                {{item.createTime}}
              </el-descriptions-item>
              <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
                <template slot="label"><i class="el-icon-date"></i>处理时间</template>
                {{item.finishTime}}
              </el-descriptions-item>
              <el-descriptions-item v-if="item.duration" label-class-name="my-label">
                <template slot="label"><i class="el-icon-time"></i>耗时</template>
                {{item.duration}}
              </el-descriptions-item>
              <el-descriptions-item v-if="item.comment" label-class-name="my-label">
                <template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
                <el-tag type="primary" v-if="item.comment.type === '1'">正常： {{item.comment.comment}}</el-tag>
                <el-tag type="success" v-if="item.comment.type === '2'">退回： {{item.comment.comment}}</el-tag>
                <el-tag type="warning" v-if="item.comment.type === '3'">驳回： {{item.comment.comment}}</el-tag>
                <el-tag type="danger" v-if="item.comment.type === '6'">终止： {{item.comment.comment}}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <el-card class="box-card" v-else>
      <el-empty description="未找到相关业务流程记录"></el-empty>
    </el-card>
  </el-drawer>
</template>

<script>
  import { flowRecord, flowRecordByKey } from '@/api/flowable/finished'

  export default {
    name: 'FlowRecord',
    props: {
      drawer: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        flowRecordList: []         // 流程流转数据
      }
    },
    //计算属性
    computed: {
      drawer_: {
        get() {
          return this.drawer
        },
        //值一改变就会调用set,用set方法去改变父组件的值
        set(value) {
          this.$emit('changeDrawer', value)
          this.flowRecordList = []
        }
      }
    },
    methods: {
      getFlowRecordByKey(businessKey) {
        flowRecordByKey({businessKey: businessKey}).then(res => {
          this.flowRecordList = res.data.flowList
        })
      },
      getFlowRecordByInsId(procInsId) {
        flowRecord({procInsId: procInsId}).then(res => {
          this.flowRecordList = res.data.flowList
        })
      },
      setIcon(val) {
        if (val) {
          return 'el-icon-check'
        } else {
          return 'el-icon-time'
        }
      },
      setColor(val) {
        if (val) {
          return '#2bc418'
        } else {
          return '#b3bdbb'
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .box-card {
    width: 100%;
    margin-bottom: 20px;
  }
  .el-tag{
    white-space: normal;
    height:auto;
  }
</style>
